<template>
    <el-dialog title="添加商品" :visible="addItemVisible"
               @update:visible="setAddItemVisible(false)" center
               width="40%">
        <el-form unregisterModule class="discount-select-form">
            <el-form-item label="商品名">
                <el-input :value="item.stockName" readonly/>
            </el-form-item>
            <el-form-item label="商品规格">
                <el-input :value="item.stockSpecification" readonly/>
            </el-form-item>
            <el-form-item label="商品类型">
                <el-input v-model="item.stockType" readonly/>
            </el-form-item>
            <el-form-item label="商品数量">
                <el-input :value="item.stockNum" readonly/>
            </el-form-item>

            <el-form-item label="零售价">
                <el-input v-model="itemPrice"/>
            </el-form-item>

            <el-form-item label="添加图片：">
                <br/>
                <el-upload
                        class="upload-demo"
                        action="/api/items/uploadimg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload1">
                    <img v-if="itemImg" :src="itemImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="addItem()">添加</el-button>
        <el-button @click="setAddItemVisible(false)">返回</el-button>
    </span>
    </el-dialog>
</template>
<script>
    import {mapActions, mapMutations, mapState} from "vuex";
    import {addItems} from "../../service/item";

    export default {
        data() {
            return {
                fileList: [
                    //{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
                    // {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
                ],
                itemPrice: '',
                itemImg:''
            };
        },
        computed: {
            ...mapState("item", ["addItemVisible", "item"]),
        },
        methods: {
            ...mapMutations("item", ["setAddItemVisible"],),
            ...mapActions("item", ["listItems",]),
            //添加方法
            async addItem() {
                let response = await addItems(this.item.stockId, this.itemPrice);
                if(response.data.status===1){
                    alert("申请已提交")
                    this.setAddItemVisible(false)
                }
            },
            //将图片数组图片转base64并且添加到图片数据库
            addPicture() {
                let fileObj = document.getElementById('fileEl').fileList[0]  //获取文件对象
                let reader = new FileReader()   //新建一个FileReader对象
                reader.readAsDataURL(fileObj)   //将读取的文件转换成base64格式
                return reader;
            },
            handleAvatarSuccess1(res, file) {
                this.itemImg = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload1(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }

</script>

<style>
    .discount-select-form {
        padding: 0 40px 0 40px;
    }

    .discount-select-form .el-input {
        width: 100%;
    }
</style>
